/* eslint-disable no-unused-vars */
import React, { useEffect, useImperativeHandle, useState, forwardRef } from 'react';
import { Form, Tabs, Input, Select, Layout, Button } from 'antd';

const DesignProperty = forwardRef((props, ref) => {
  // 选中的控件 extend from BaseControl
  const { parentForm } = props;
  const [selectedControl, setSelectedControl] = useState(null);
  const [useMode, setMode] = useState('form');
  const [iscollapsed, setIscollapsed] = useState(false);

  useImperativeHandle(ref, () => ({
    selectedControl,
    setEditProperty: (mode, controlOrForm) => {
      setMode(mode);
      if (mode === 'control') {
        setSelectedControl(controlOrForm);
        controlOrForm.initProperty(parentForm);
      }
      setIscollapsed(false);
      // } else if (mode === 'form') {
      // } else if (mode === 'event') {
      //   // setUseFormData(controlOrForm);
      // }
    },
  }));

  useEffect(() => {}, []);

  const renderTabs = function () {
    if (useMode === 'control') {
      return selectedControl?.getPropertyTabs(parentForm);
    } else if (useMode === 'form') {
      return (
        <Tabs.TabPane tab="表单配置" key="1">
          <Form.Item label="表单名称">
            <Input
              placeholder="表单名称"
              value={props.parentForm.useformData.formname}
              onChange={(event) => {
                props.parentForm.setFormProperty({ formname: event.target.value });
              }}
            />
          </Form.Item>
          <Form.Item label="对齐方式">
            <Select
              onChange={(event) => {
                props.parentForm.setFormProperty({ layout: event });
              }}
              value={props.parentForm.useformData.layout}
            >
              <Select.Option value="horizontal">垂直布局</Select.Option>
              <Select.Option value="vertical">水平布局</Select.Option>
              <Select.Option value="inline">行布局</Select.Option>
            </Select>
          </Form.Item>
          <Form.Item label="表单管理">
            <Button type="link" onClick={() => parentForm.refs.refdatasource.current.setShowList(true)}>
              配置数据源
            </Button>
            <Button type="link" onClick={() => parentForm.refs.refsubForms.current.setShowList(true)}>
              管理子表单
            </Button>
            <Button type="link" onClick={() => parentForm.refs.refevent.current.setShowList(true)}>
              智能助理
            </Button>
            <Button type="link" onClick={() => parentForm.refs.refDesignHistroy.current.setEdit(true)}>
              重置版本
            </Button>
          </Form.Item>
        </Tabs.TabPane>
      );
    }
    // else if (useMode === 'event') {
    // return (
    //   <Tabs.TabPane tab="智能助理" key="1">
    //     <EventScriptList />
    //   </Tabs.TabPane>
    // );
    // }
    else {
      return <></>;
    }
  };

  return (
    <Layout.Sider
      title="右侧属性栏"
      width={350}
      theme="light"
      collapsible
      collapsedWidth={0}
      collapsed={iscollapsed}
      reverseArrow
      trigger={iscollapsed === true ? '<' : '>'}
      zeroWidthTriggerStyle={{ top: `${window.innerHeight / 2}px`, width: '12px', left: '-12px' }}
      onCollapse={(collapsed, type) => {
        setIscollapsed(collapsed);
      }}
    >
      <Form layout="vertical">
        <Tabs>{renderTabs()}</Tabs>
      </Form>
    </Layout.Sider>
  );
});

export default DesignProperty;
